<template>
  <div class="ShowApproval">
    <el-steps :active="thisNodesInfo.active">
      <el-step
        :title="`步骤${ind + 1}`"
        v-for="(item, ind) in thisNodesInfo.nodes"
        :key="`node${ind}`"
        :icon="
          ind + 1 === thisNodesInfo.active && thisNodesInfo.reject
            ? 'el-icon-error'
            : ind + 1 < thisNodesInfo.active || item.flag
            ? 'el-icon-success'
            : ''
        "
      >
        <template slot="description">
          <template v-if="!item.flag">
            <show-person :personInfo="item" />
            <span v-if="(item instanceof Array)" class="task-mode">{{
              thisNodesInfo.task_mode[ind - 1] === "order"
                ? "串"
                : thisNodesInfo.task_mode[ind - 1] === "compete"
                ? "并"
                : "竞"
            }}</span>
          </template>
          <span v-else>结束</span>
        </template>
      </el-step>
    </el-steps>
  </div>
</template>

<script>
import showPerson from "../public/showPerson.vue";
export default {
  components: { showPerson },
  name: "ShowApproval",
  props: ["nodesInfo"],
  data() {
    return {
      thisNodesInfo: this.nodesInfo,
    };
  },
  watch: {
    nodesInfo: {
      handler(newVal) {
        this.thisNodesInfo = newVal;
        if (this.thisNodesInfo.nodes.length < this.thisNodesInfo.active) {
          this.addEndNode();
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    addEndNode() {
      this.thisNodesInfo.nodes.push({
        flag: true,
      });
    },
  },
};
</script>
<style lang="less" scoped>
.ShowApproval {
  margin-top: 30px;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  :deep(.el-steps) {
    .el-icon-error {
      color: #f56c6c;
    }
    .el-icon-success {
      color: #67c23a;
    }
    .task-mode {
        display: inline-block;
        background-color: #FAE7E9;
        color: #D0102C;
        padding: 4px 6px;
        border-radius: 4px;
        margin-top: 10px;
    }
  }
}
</style>
